vue
<template>
  <el-radio-group v-model="internalValue" @change="handleChange">
    <el-radio
      v-for="option in options"
      :key="option.value"
      :value="option.value"
    >
      {{ option.label }}
    </el-radio>
  </el-radio-group>
</template>

<script>
import { defineComponent, computed } from 'vue'
import { ElRadioGroup, ElRadio } from 'element-plus'

export default defineComponent({
  name: 'RadioGroupComponent',
  components: {
    ElRadioGroup,
    ElRadio
  },
  props: {
    modelValue: {
      type: [String, Number],
      required: true
    },
    options: {
      type: Array,
      required: true
    }
  },
  emits: ['update:modelValue'],
  setup(props, { emit }) {
    const internalValue = computed({
      get: () => props.modelValue,
      set: (value) => emit('update:modelValue', value)
    })

    function handleChange(value) {
      emit('update:modelValue', value)
    }

    return {
      internalValue,
      handleChange
    }
  }
})
</script>
